<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	   	<title></title>
	    <link href="/static/weike/css/style.css" rel="stylesheet">
	    <script src="/static/weike/js/style.js"></script>
	    <script src="/static/weike/js/pic_deal.js"></script>
	    <script src="/static/js/jquery.js"></script>
	    <script src="/static/lrz/dist/lrz.bundle.js"></script>
	</head>
	<body class="wk_img_change">
	    <input type="hidden" id="pirture_length" value="{$lunbo_length}">
		<header>
		</header>
		<input type="checkbox" class="change" />
		<span></span>
		<article class="article">
			<div class="input_file">
				<section class="show">
					<input type="file" name="0" accept="image/*" value="" class="_input"/>
					<input type="hidden" value="{$lunbo[0]['img_cover']}" class="php_trans" />
					<canvas class="input_canvas"></canvas>
					<aside>
						<img src="{$lunbo[0]['img_cover']}" class="press" name="{$lunbo[0]['id']}" />
						<div></div>
					</aside>	
					<div class="ben_close"><span></span></div>
					<footer>
						<div>链接地址:</div>
						<select class="php_select">
						    <option value="" >无</option>
						    {volist name="room" id="vo"}
							<option value="http://mg.bonayiyou.com/index/home/class_pay?room_id={$vo.room_id}" >{$vo.title}</option>
							{/volist}
						</select>
					</footer>
				</section>
				<section>
					<input type="file" name="1" accept="image/*" value="" class="_input"/>
					<input type="hidden" value="{$lunbo[1]['img_cover']}" class="php_trans" />
					<canvas class="input_canvas"></canvas>
					<aside>
						<img src="{$lunbo[1]['img_cover']}" class="press" name="{$lunbo[1]['id']}"/>
						<div></div>
					</aside>	
					<div class="ben_close"><span></span></div>
					<footer>
						<div>链接地址:</div>
						<select class="php_select">
						    <option value="" >无</option>
							{volist name="room" id="vo"}
							<option value="http://mg.bonayiyou.com/index/home/weike_chizbo?room_id={$vo.room_id}" >{$vo.title}</option>
							{/volist}
						</select>
					</footer>
				</section>
				<section>
					<input type="file" name="2" accept="image/*" value="" class="_input" />
					<input type="hidden" value="{$lunbo[2]['img_cover']}" class="php_trans" />
					<canvas class="input_canvas"></canvas>
					<aside>
						<img src="{$lunbo[2]['img_cover']}" class="press" name="{$lunbo[2]['id']}" />
						<div></div>
					</aside>	
					<div class="ben_close"><span></span></div>
					<footer>
						<div>链接地址:</div>
						<select class="php_select">
						    <option value="" >无</option>
							{volist name="room" id="vo"}
							<option value="http://mg.bonayiyou.com/index/home/weike_chizbo?room_id={$vo.room_id}" >{$vo.title}</option>
							{/volist}
						</select>
					</footer>
				</section>
				<section>
					<input type="file" name="3" accept="image/*" class="_input" />
					<input type="hidden" value="{$lunbo[3]['img_cover']}" class="php_trans" />
					<canvas class="input_canvas"></canvas>
					<aside>
						<img src="{$lunbo[3]['img_cover']}" class="press" name="{$lunbo[3]['id']}" />
						<div></div>
					</aside>	
					<div class="ben_close"><span></span></div>
					<footer>
						<div>链接地址:</div>
						<select class="php_select">
						    <option value="" >无</option>
							{volist name="room" id="vo"}
							<option value="http://mg.bonayiyou.com/index/home/weike_chizbo?room_id={$vo.room_id}" >{$vo.title}</option>
							{/volist}
						</select>
					</footer>
				</section>
			</div>
		</article>
		<aside>
			
		</aside>
		<div class="div">
			<button onclick="javascript:window.location.href='http://mg.bonayiyou.com/index/home/person_zhibo.html'">取消编辑</button>
			<button onclick="" class="sure">确认编辑</button>
		</div>
		<script>
			var art = document.getElementsByTagName("article")[0],
				inp = art.getElementsByClassName("_input"),
				num = inp.length;
				close =  art.getElementsByClassName("ben_close");
				for(var i =0;i<close.length;i++){
					on(close[i],"click",function(){
						var m =this.parentNode;
							m.getElementsByTagName("img")[0].src = "";//此处地址为原始地址
						var name=m.getElementsByTagName("img")[0].getAttribute("name");
						$.post('http://mg.bonayiyou.com/index/home/del_person_lunbo',{'id':name},function(){},"JSON");
                        console.log(name);
						var tru = art.getElementsByClassName("true");
							if(tru.length >= num ){
								m.classList.remove("true");
							}else{
								m.classList.remove("true","show");
							}
							m.parentNode.appendChild(m);
							resetname();
					})
				}
				function resetname(){
					for(var i =0;i<close.length;i++){
						inp[i].setAttribute("name",String(i));
					}
				}
			var php_sure = document.getElementsByClassName("sure")[0];
				on(php_sure,"click",function(){
					var php_trans = document.getElementsByClassName("php_trans"),
						php_select = document.getElementsByClassName("php_select"),
						str = [],str_child = [];
						for(var i =0;i<php_trans.length;i++){
							str_child = [php_trans[i].value,php_select[i].value];
							str.push(str_child);
						}
					var str_trans = JSON.stringify(str);//str_trans就是与后台传输的值
					var url="http://mg.bonayiyou.com/index/home/weike_img_change";
					$.post(url,{data:str_trans},function(e){
				    //编辑轮播图成功后调到直播间页面
                    if(e.code==1)
                    {
                    window.location.href="http://mg.bonayiyou.com/index/home/person_zhibo.html";
                    }
					},"JSON");
				})

	//移动端上传图片
    $("input[type=file]").change(function () {
    	var next_input=$(this).next();
    	var next_img=$(this).next().next().next().children(":first");
    	var sourceSize =this.files[0].size / 1024;
        console.log(sourceSize);
        /* 压缩图片 */
        if(sourceSize<300)
        {
        lrz(this.files[0], {
        	quality:1
            //width: 750 //设置压缩参数
        }).then(function (rst) {
            /* 处理成功后执行 */
            rst.formData.append('base64img', rst.base64); // 添加额外参数
            $.ajax({
                url: "/index/home/post_img",
                type: "POST",
                data: rst.formData,
                processData: false,
                contentType: false,
                success: function (data) {
                   next_input.attr('value',data);
                   next_img.attr('src',data);
                }
            });
        }).catch(function (err) {
            /* 处理失败后执行 */
        }).always(function () {
            /* 必然执行 */
        })
    }
    else
    {
    	lrz(this.files[0], {
        	//quality:1
            //width: 750 //设置压缩参数
        }).then(function (rst) {
            /* 处理成功后执行 */
            rst.formData.append('base64img', rst.base64); // 添加额外参数
            $.ajax({
                url: "/index/home/post_img",
                type: "POST",
                data: rst.formData,
                processData: false,
                contentType: false,
                success: function (data) {
                   next_input.attr('value',data);
                   next_img.attr('src',data);
                }
            });
        }).catch(function (err) {
            /* 处理失败后执行 */
        }).always(function () {
            /* 必然执行 */
        })
    }
    })	

    //555555555
   
	
	   	var m = $("#pirture_length").val(),
		input_file = document.getElementsByClassName(" input_file ")[0],
		sec =  input_file.getElementsByTagName("section");
		for( var i = 0;i<m;i++){
			sec[i].classList.add("show","true");
		}
		if(m<4){
			sec[m].classList.add("show");
		}
	

		</script>
	</body>
</html>
